<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>停车用户登录</title>
    <link rel="stylesheet" href="/static/assets/css/layui.css">
    <style>
        .my-login {
            margin: 200px 20px 200px 20px;
            -webkit-box-shadow: 0 3px 3px lightgray;
            -moz-box-shadow: 0 3px 3px lightgray;
            box-shadow: 0 3px 3px lightgray;
        }

        .layui-form-pane .layui-form-label {
            width: 100%;
            /*float: left;*/
        }

        .layui-form-pane .layui-input-block {
            margin-left: 0;
            /*float: left;*/
        }

        .my-login .layui-form {
            padding-top: 20px;
            padding-left: 10px;
        }

        .layui-tab-title {
            margin-left: 23%;
        }
    </style>
</head>
<body>
<!-- 表单选项 -->
<div class="my-login">
    <div class="layui-tab layui-tab-brief" lay-filter="test1">
        <ul class="layui-tab-title">
            <li class="layui-this">密码登录</li>
            <li>短信登录</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <form class="layui-form layui-form-pane normal-login-div">
                    <div class="layui-fluid">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-form-item layui-col-xs12">
                                <div class="layui-row">
                                    <div class="layui-col-xs3">
                                        <label class="layui-form-label">
                                            <i class="layui-icon layui-icon-cellphone-fine"></i>
                                        </label>
                                    </div>
                                    <div class="layui-col-xs9">
                                        <!-- 用户名 -->
                                        <div class="layui-input-block">
                                            <input type="text" id="user" name="phone" required lay-verify="required|phone"
                                                   placeholder="请输入电话号码" autocomplete="off" class="layui-input"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-row layui-col-space10">
                            <!-- 密码 -->
                            <div class="layui-form-item layui-col-xs12">
                                <div class="layui-col-xs3">
                                    <label class="layui-form-label">
                                        <i class="layui-icon layui-icon-password"></i>
                                    </label>
                                </div>
                                <div class="layui-col-xs9">
                                    <div class="layui-input-block">
                                        <input type="password" id="pwd" name="password" required lay-verify="required"
                                               placeholder="请输入密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-row layui-col-space10">
                            <div class="layui-form-item layui-col-xs12">
                                <div class="layui-col-xs3">
                                    <label class="layui-form-label">
                                        <i class="layui-icon layui-icon-ok-circle"></i>
                                    </label>
                                </div>
                                <div class="layui-col-xs6">
                                    <div class="layui-input-block">
                                        <input type="text" name="code" required lay-verify="required"
                                               placeholder="请输入验证码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-xs3">
                                    <img id="checkCode" src="/user/checkCode"/>
                                </div>
                            </div>
                        </div>

                        <div class="layui-row">
                            <div class="layui-form-item layui-col-xs12">
                                <div class="layui-input-block layui-row">
                                    <div class="layui-col-xs12">
                                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="formDemo"
                                                id="normal-login">登录
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form layui-form-pane phone-login-div">
                    <div class="layui-fluid ">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-form-item layui-col-xs12">
                                <div class="layui-row">
                                    <div class="layui-col-xs3">
                                        <label class="layui-form-label">
                                            <i class="layui-icon layui-icon-cellphone"></i>
                                        </label>
                                    </div>
                                    <div class="layui-col-xs9">
                                        <!-- 电话号码 -->
                                        <div class="layui-input-block">
                                            <input type="text" name="phoneNum" id="phone" required
                                                   lay-verify="required|phone" placeholder="请输入电话号码" autocomplete="off"
                                                   class="layui-input"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="layui-row layui-col-space10">

                            <!-- 验证码 -->
                            <div class="layui-form-item layui-col-xs12">
                                <div class="layui-col-xs3">
                                    <label class="layui-form-label">
                                        <i class="layui-icon layui-icon-vercode"></i>
                                    </label>
                                </div>
                                <div class="layui-col-xs5">
                                    <div class="layui-input-block">
                                        <input type="number" name="checkCode" required lay-verify="required|number"
                                               placeholder="请输入验证码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-col-xs4">
                                    <button type="button" class="layui-btn layui-btn-primary" id="getCheck">获取验证码
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="layui-row">
                            <div class="layui-form-item layui-col-xs12">
                                <div class="layui-input-block layui-row">
                                    <div class="layui-col-xs12">
                                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="phoneLogin"
                                                id="phoneLogin">登录
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="/static/assets/layui.js"></script>
<script src="/static/assets/jquery.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'jquery', 'layer', 'element', 'util'], function () {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            util = layui.util;

        //倒计时
        var countdown = 60;        //初始值
        function settime(val) {
            if (countdown === 0) {
                val.removeAttribute("disabled");
                val.value = "获取验证码";
                countdown = 60;
                return false;
            } else {
                val.setAttribute("disabled", true);
                val.value = "重新发送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function () {   //设置一个定时器，每秒刷新一次
                settime(val);
            }, 1000);
        }

        function loginSuccess(res) {
            layer.msg("登录成功")
            sessionStorage.setItem("owner", res.data.owner);
            sessionStorage.setItem("ownerId", res.data.owner.ownerId);
            sessionStorage.setItem("ownerName", res.data.owner.ownerName);
            sessionStorage.setItem("ownerTel", res.data.owner.ownerTel);
            setTimeout('location.href="/desk/app"', 2000);
        }


        //添加表单监听事件,提交注册信息
        form.on('submit(formDemo)', function (data) {
            layer.msg("正在登录中。。。。")
            console.log(data.field);
            $.ajax({
                url: '/weiXin/login',
                type: 'post',
                data: data.field,
                dataType: 'json',
                success: function (res) {
                    console.log(res)
                    if (200 === res.code) {
                        $("#normal-login").attr("disabled", "disable")
                        loginSuccess(res)
                    } else if (404 === res.code) {
                        layer.msg(res.message)
                        $("#checkCode").attr("src", "/user/checkCode?name=" + new Date().getTime())
                    } else if (0 === res.code) {
                        layer.msg("用户名或者密码错误")
                        $("#checkCode").attr("src", "/user/checkCode?name=" + new Date().getTime())
                    } else if (808 === res.code) {
                        layer.msg(res.message)
                        $("#checkCode").attr("src", "/user/checkCode?name=" + new Date().getTime())
                    }
                },
                error: function (res) {

                }
            })
            //防止页面跳转
            return false;
        });

        form.on('submit(phoneLogin)', function (data) {
            layer.msg("正在登录中。。。。")
            console.log(data)
            $.ajax({
                url: '/weiXin/phoneLogin',
                type: 'post',
                data: {
                    ownerTel: data.field.phoneNum,
                    code: data.field.checkCode
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 200) {
                        $("#phoneLogin").attr("disabled", "disable")
                        loginSuccess(res)
                    } else if (808 === res.code) {
                        layer.msg(res.message)
                    } else if (res.code === 0) {
                        layer.msg('验证码不正确')
                    }
                },
                error: function (res) {

                }
            })
            //防止页面跳转
            return false;
        })

        $('#getCheck').on('click', function () {
            var phone = $('#phone').val()
            console.log(phone)
            if (/^1[3456789]\d{9}$/.test(phone)) {
                // if (countdown === 0) {
                //     $('#getCheck').removeAttribute("disabled");
                //     $('#getCheck').val("获取验证码");
                //     countdown = 60;
                //     return false;
                // } else {
                //     $('#getCheck').attr("disabled", true);
                //     $('#getCheck').value="重新发送(" + countdown + ")";
                //     countdown--;
                // }
                // setTimeout(function() {   //设置一个定时器，每秒刷新一次
                //     settime( $('#getCheck'));
                // },1000);

                $.ajax({
                    url: '/weiXin/getCode',
                    type: 'post',
                    data: {
                        phone: phone
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg("验证码发送成功")
                        } else {
                            layer.msg("验证码发送失败")
                        }
                    },
                    error: function (res) {
                        layer.msg("验证码发送错误")
                    }
                })
            } else {
                layer.tips('请正确填写手机号', '#getCheck', {
                    tips: [1, '#3595CC'],
                    time: 4000
                });
            }

            //防止页面跳转
            return false;
        })

    });
</script>
</body>
</html>